<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cool Cloud</title>

    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
    <!-- IonIcons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="dist/css/adminlte.min.css">
    <!--xcConfirm-->
    <link rel="stylesheet" href="dist/js/xcConfirm/css/xcConfirm.css">
    <style>
        .tipmsg {
            background-color: #f39c12;
            position: absolute;
            z-index: 100;
            top: 30px;
            right: 3%;
            padding: 5px 5px 5px 5px;
            border-radius: 15px;
            border: 2px solid #ddd;
            box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
            color: white;
        }

        .card1 {
            margin: 2rem auto;
            padding: 2rem;
            border-radius: 2%;
            background-color: #0ebeff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
        }

        .btn-full-width {
            width: 100%;
            border-color: #0ebeff;
        }

        .card1:hover {
            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
        }

        .modal-dialog {
            top: 40%;
        }
    </style>
</head>
<body class="hold-transition sidebar-mini">
<!-- wrapper -->
<div class="wrapper">
    <!-- Navbar -->
    <div th:replace="common/header :: header"></div>

    <!-- Main Sidebar Container -->
    <div th:replace="common/menu :: sidebar"></div>

    <!-- Content Wrapper. Contains page content -->
    <div th:replace="content/walletContent :: walletcontent"></div>

    <!-- /Footer -->
    <div th:replace="common/footer :: footer"></div>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark"></aside>
</div>

<!--编辑个人信息-->
<div th:replace="common/editInforModel :: editinfo"></div>

<!--充值金额-->
<!-- Small modal -->
<button type="button" hidden class="AddMoneyBtn" data-toggle="modal" data-target="#addMoney"></button>

<div class="modal fade" id="addMoney" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content " style="width: 100%">
            <div class="modal-header">
                <h5 class="modal-title">余额充值</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center">
                <input placeholder="输入金额(整数)" type="number" class="form-control" required id="payMoney">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="submitPayMoney()">提交充值</button>
            </div>
        </div>
    </div>
</div>

<!--充值容量-->
<!-- Small modal -->
<button type="button" hidden class="AddRomBtn" data-toggle="modal" data-target="#addRom"></button>

<div class="modal fade" id="addRom" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content " style="width: 100%">
            <div class="modal-header">
                <h5 class="modal-title">容量充值(1元/100M)</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center">
                <input placeholder="输入容量(100的整数倍)" type="number" class="form-control" required id="payRom"
                       onmouseleave="CheckRom()">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="submitPayRom()">提交充值</button>
            </div>
        </div>
    </div>
</div>

<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- ChartJS -->
<script src="plugins/chart.js/Chart.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!--邀请注册-->
<script src="dist/js/invite.js"></script>
<!--xcConfirm-->
<script src="dist/js/xcConfirm/js/xcConfirm.js"></script>
<!--搜索-->
<script src="dist/js/search.js"></script>
<script>
    function addMoney() {
        $(".AddMoneyBtn").click();
    }

    function addRom() {
        $(".AddRomBtn").click();
    }

    function CheckRom() {
        let payRom = $("#payRom").val();
        if (payRom % 100 !== 0) {
            $("#payRom").val(Math.ceil(payRom / 100) * 100);
        }
    }

    function submitPayMoney() {
        let location = window.location.href;
        let strings = location.split("coolcloud");
        let paymoney = $("#payMoney").val();
        if (paymoney <= 0) {
            alert("充值金额必须大于0");
            return;
        }
        window.location.href = strings[0] + "coolcloud/pay?money=" + paymoney;
    }

    function submitPayRom() {
        let payRom = $("#payRom").val();
        if (payRom <= 0) {
            alert("充值容量必须大于0");
            return;
        }
        if (payRom % 100 !== 0) {
            $("#payRom").val(Math.ceil(payRom / 100) * 100);
            return;
        }
        $.ajax({
            url: "payRom",
            type: "POST",
            data: {
                "payRom": payRom
            },
            success: function (date) {
                alert(date.split("-")[1]);
                $('.close').click();
                let location = window.location.href;
                let strings = location.split("coolcloud");
                window.location.href = strings[0] + "coolcloud/wallet"
            }
        })
    }

    function editMyInfo() {
        $(".userName").val("[[${session.loginUser.userName}]]");
        $(".edit").click();
    }

    function submit() {
        let userName = $(".userName").val();
        let IwtNewPsd = $(".IwtNewPsd").val();
        let IwtOralPsd = $(".IwtOralPsd").val();
        let id = [[${session.loginUser.userId}]];
        console.log(userName, id, IwtNewPsd, IwtOralPsd)
        if (userName == '') {
            alert("用户名不能为空！");
            return;
        }
        if ((IwtNewPsd == '' && IwtOralPsd != '') || (IwtNewPsd != '' && IwtOralPsd == '')) {
            alert("需要修改密码,原密码与新密码均不能为空！");
            return;
        }
        $.ajax({
            url: "UpdateInfo",
            type: "POST",
            data: {
                "id": id,
                "username": userName,
                "IwtNewPsd": IwtNewPsd,
                "IwtOralPsd": IwtOralPsd
            },
            success: function (date) {
                if (date.status == "psdwrong") {
                    alert("原密码错误！")
                } else if (date.status == "success" && IwtNewPsd != '') {
                    $("#logout").click();
                } else if (date.status == "success" && IwtNewPsd == '') {
                    $(".tipmsg").html($('<span  style="margin-right: 25px">  用户名修改成功！</span><i class="fas fa-times" onclick="closeTip()"></i>'));
                    $(".tipmsg").show();
                    $('.close').click();
                    setInterval("location.reload( )", 1000);
                }
            }
        })
    }

    function closeTip() {
        $(".tipmsg").html("");
        $(".tipmsg").hide();
    }
</script>
</body>
</html>
